<template>
  <div>
    <div class="bank">
      <p @click="search()">
        <van-icon name="search" />
        <input type="text" placeholder="搜索职位/公司/内容" />
      </p>
      <span @click="off()">取消</span>
    </div>

    <div class="tan">
      <span>探索发现</span>
      <p @click="check()">
        <van-icon name="replay" />
        <span>换一批</span>
      </p>
    </div>

    <div class="kuai">
      <span v-for="(v, i) in newarr" :key="i">{{ v }}</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    off() {
      this.$router.go(-1);
    },
    check() {
      this.newarr = []
      while(this.newarr.length < 12) {
        this.num = parseInt(Math.random() * this.spanarr.length)
        if(this.newarr.indexOf(this.spanarr[this.num])== -1) {
          this.newarr.push(this.spanarr[this.num])
        }
      }
    }
  },
  data() {
    return {
      flag: true,
      btntext: '元/吨',
      num: 0,
      newarr:[
        "零售电商",
        "剪辑学徒",
        "跟谁学前端",
        "java金融开发",
        "双休无经验",
        "移动项目经理",
        "前端开发java",
        "兼职剪辑",
        "校园软件",
        "自媒体视频剪辑",
        "信创工程师",
        "数字零售"],
      spanarr: [
        "双休无经验",
        "剪辑学徒",
        "自媒体视频剪辑",
        "西安地铁安检员",
        "硬软件",
        "工业电子",
        "数字零售",
        "影视后期剪辑",
        "美术剪辑",
        "法本数据标注",
        "声音剪辑",
        "兼职剪辑",
        "校园软件",
        "协议栈开发",
        "督导负责人",
        "金融行业销售经理",
        "软件定制销售",
        "警卫安检",
        "crm软件",
        "java金融开发",
        "跟谁学前端",
        "前端开发java",
        "移动项目经理",
        "视频后期特效",
        "简单的视频剪辑",
        "转go",
        "htd",
        "渠道软件销售",
        "安卓全栈工程师",
        "直销客户经理",
        "软件技术销售",
        "java二次开发",
        "光刻机销售",
        "零售电商",
        "信创工程师",
        "短信销售",
        "nfc开发",
        "并购分析师",
        "抖音视频制作",
      ],
    };
  },
};
</script>

<style scoped>
.bank {
  display: flex;
  display: flex;
  padding: 0.20rem 0.20rem;
  justify-content: space-between;
  align-items: center;
}
.bank > p {
  position: relative;
  width: 2.8rem;
  height: 0.4rem;
}
.bank > p > i {
  position: absolute;
  left: 0.20rem;
  top: 0.10rem;
  font-size: 0.20rem;
}
.bank > p input {
  width: 100%;
  background: #f0f0f0;
  padding-left: 0.50rem;
  height: 100%;
  border: 0;
  border-radius: 0.60rem;
  box-sizing: border-box;
}
.bank > span {
  line-height: 0.40rem;
}

.tan {
  display: flex;
  justify-content: space-between;
  margin: 0.10rem 0.20rem;
}
.tan > span {
  font-size: 0.19rem;
  font-weight: bold;
}
.tan > p > i {
  margin-right: 0.05rem;
}

.kuai {
  display: flex;
  flex-wrap: wrap;
  margin: 0.10rem 0.14rem;
  font-size: 0.14rem;
}
.kuai span {
  padding: 0.06rem 0.16rem;
  margin: 0.06rem 0.06rem;
  background: #f0f0f0;
  border-radius: 0.04rem;
}
</style>